<template>
	<view class="upload-content">
		<view v-if="list.length" class="pic-wrap">
			<view v-for="(pic, j) in list" :key="j" class="pic-item">
				<u-icon custom-style="position: absolute; top: 4rpx;right: 4rpx;"
					name="close-circle" color="#ddd" size="16"
					@click="handleClearImg(j)"></u-icon>
				<image class="pic-dom" mode="aspectFit" :src="pic.url"
					@click="handleViewPic(pic.url)"></image>
			</view>
		</view>
		<u-icon v-else custom-style="border:1px solid #ddd;padding: 20rpx;"
			name="plus" color="#ddd" size="80" @click="handleSelectImg(i)"></u-icon>
		<view v-if="picture" class="tuya-wrap">
			<view class="tuya-topwrap">
				<u-icon name="close-circle" size="32" color="#fff" @click="
						$emit('pageoverflow', false);
						picture = '';
					"></u-icon>
			</view>
			<yl-graffiti ref="graffiti" :lineWidth="5" :bgImage="picture"
				:shape="shape" :width="400*aspectRatio" :textBottomTip="textBottomTip"
				@stepChanged="stepChanged">
			</yl-graffiti>
			<view class="tuya-bottomwrap">
				<view v-if="drawType===1" class="line-type-wrap">
					<view :class="['line-style-item',lineStyle===1?'active-style':'']"
						@click="handleChaneLineStyle(1)">
						<image class="line-style-icon" :src="curveIcon" mode="aspectFill">
						</image>
					</view>
					<view :class="['line-style-item',lineStyle===2?'active-style':'']"
						@click="handleChaneLineStyle(2)">
						<image class="line-style-icon" :src="circleIcon" mode="aspectFill">
						</image>
					</view>
				</view>
				<view class="btn-leftwrap">
					<view class="line-btn" :class="{ 'active-drawtype': drawType === 1 }"
						@click="changeDrawType(1)">
						<image v-if="drawType===1" class="typebtnicon" :src="lineAcriveIcon"
							mode="aspectFill"> </image>
						<image v-else class="typebtnicon" :src="lineIcon" mode="aspectFill">
						</image>
						<view>画笔</view>
					</view>
					<view class="line-btn" :class="{ 'active-drawtype': drawType === 2 }"
						@click="changeDrawType(2)">
						<image v-if="drawType===2" class="typebtnicon" :src="textActiveIcon"
							mode="aspectFill"> </image>
						<image v-else class="typebtnicon" :src="textIcon" mode="aspectFill">
						</image>
						<view>文字</view>
					</view>
				</view>
				<view class="repeal-btn" @click="selectWritingOption(3)"> 撤销 </view>
				<view class="confirm-btn" @click="savePicture"> 完成 </view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		uploadFile
	} from '@/api/common.js';
	import curveIcon from '@/subpak_survey/images/curve-style-icon.png';
	import circleIcon from '@/subpak_survey/images/circle-style-icon.png';
	import lineIcon from '@/subpak_survey/images/line-tuya-icon.png';
	import lineAcriveIcon from '@/subpak_survey/images/line-active-tuya-icon.png';
	import textIcon from '@/subpak_survey/images/text-tuya-icon.png';
	import textActiveIcon from '@/subpak_survey/images/text-active-tuya-icon.png';
	export default {
		name: 'UploadImg',
		props: {
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				},
			},
			textBottomTip: {
				type: String,
				default: '',
			},
		},
		
		data() {
			return {
				circleIcon,
				curveIcon,
				lineIcon,
				lineAcriveIcon,
				textIcon,
				textActiveIcon,
				list: [],
				stepInfo: {
					// 用来控制撤销和重做
					curStep: -1,
					len: 0,
				},
				saving: false,
				picture: '',
				tuyaPicIndex: 0,
				drawType: '',
				lineStyle: 1, // 1曲线，2画圆
				aspectRatio: 1, // 上传图片横纵比
				screenWidth: 400,
			};
		},
		watch: {
			value: {
				handler: function(value) {
					this.list = [...value];
				},
				immediate: true,
				deep: true,
			},
		},
		computed: {
			shape() {
				let shape = 'curve';
				const lineStyle = this.lineStyle;
				if (lineStyle === 1) shape = 'curve';
				if (lineStyle === 2) shape = 'hollow-circle';
				return shape;
			},
		},
		mounted() {
			this.getWindowInfo();
		},
		methods: {
			getWindowInfo(){
			 const {screenWidth} =	uni.getWindowInfo();
			 this.screenWidth = screenWidth;
			},
			handleSelectImg(i) {
				try {
					uni.chooseImage({
						count: 1,
						sourceType: ['album', 'camera'],
						success: async (res) => {
							this.$emit('pageoverflow', true);
							const imgList = [];
							const tempFilePaths = res.tempFilePaths;
							uni.getImageInfo({
								src: tempFilePaths[0],
								success: (res) => {
									console.log(res);
									const {
										height,
										width
									} = res;
									this.aspectRatio = width / height;
									this.picture = tempFilePaths[0];
								},
							});
							// 上传图片临时路径
							// tempFilePaths.map((path) => {
							// 	imgList.push(uploadFile(path));
							// });
							// const resLoaded = await Promise.all(imgList);
							// console.log(resLoaded);
							// const imgloadedList = resLoaded.map((item) => ({ url: item.picUrl, name: item.picName }));
							// this.list.push(...imgloadedList);
							// this.$emit('input', [...this.list]);
						},
					});
				} catch (e) {
					console.log(e);
				}
			},
			handleClearImg(j) {
				this.list.splice(j, 1);
				this.$emit('input', [...this.list]);
			},
			handleShowTuya(j, picUrl) {
				this.tuyaPicIndex = j;
				this.picture = picUrl;
			},
			stepChanged(e) {
				this.stepInfo = e;
			},
			selectWritingOption(index) {
				switch (index) {
					case 0:
					case 1:
					case 2:
						this.optIndex = index;
						break;
					case 3:
						this.$refs.graffiti.repeal();
						break;
					case 4:
						this.$refs.graffiti.redo();
						break;
					case 5:
						this.$refs.graffiti.clearBoard();
						break;
					default:
						break;
				}
			},
			changeDrawType(drawType) {
				this.drawType = drawType;
			},
			handleChaneLineStyle(lineStyle) {
				this.lineStyle = lineStyle;
			},
			async savePicture() {
				try {
					const editedPath = await this.$refs.graffiti.saveCanvas();
					const newResLoaded = await uploadFile(editedPath);
					const editedPic = {
						url: newResLoaded.picUrl,
						name: newResLoaded.picName,
					};
					this.$set(this.list, this.tuyaPicIndex, editedPic);
					this.$emit('input', [editedPic]);
					this.$emit('pageoverflow', false);
					this.picture = '';
				} catch (e) {
					//TODO handle the exception
				}
			},
			handleViewPic(picPath) {
				console.log('handleViewPic', picPath);
				// 预览图片
				uni.previewImage({
					urls: [picPath],
				});
			},
		},
	};
</script>
<style scoped lang="scss">
	.pic-wrap {
		width: 100%;
		height: 100%;
	}

	.pic-item {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: calc(100vw - 120rpx);
		height: calc(100vw - 120rpx);
	}

	.pic-close-btn {
		position: absolute;
		top: 12rpx;
		right: 12rpx;
	}

	.tuya-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #000;
		z-index: 999;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.tuya-topwrap {
		display: flex;
		justify-content: flex-start;
		box-sizing: border-box;
		width: 100%;
		padding: 24rpx;
	}

	.tuya-bottomwrap {
		position: relative;
		z-index: 20;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		padding: 24rpx 48rpx;
		margin-bottom: 40rpx;
		color: #fff;
	}

	.line-type-wrap {
		box-sizing: border-box;
		position: absolute;
		top: -40rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 40rpx;
		padding: 8rpx;
	}

	.line-style-item {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 64rpx;
		height: 64rpx;
		margin-right: 16rpx;
		border-radius: 6rpx;
	}

	.active-style {
		border: 2rpx solid #EEB422;
	}

	.line-style-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.btn-leftwrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
	}

	.typebtnicon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 6rpx;
		margin-right: 88rpx;
	}

	.active-drawtype {
		color: #3576f2;
	}
	
	.repeal-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 64rpx;
		background: #D3D3D3;
		border-radius: 4rpx;
		font-size: 36rpx;
	}

	.confirm-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 120rpx;
		height: 64rpx;
		background: #3576f2;
		border-radius: 4rpx;
		font-size: 36rpx;
	}
</style>